<!--
 * @Description: 
 * @Author: charles
 * @Date: 2021-05-05 22:02:56
 * @LastEditors: [wangll]
 * @LastEditTime: 2021-09-22 18:55:34
-->
<template>
<!-- 2.图表容器 -->
  <div ref='root' style="height:150px">
    
  </div>
</template>
<script>
import { DualAxes } from '@antv/g2plot';
// 1.引入
export default {
  data(){
    return{

    }
  },
  mounted(){
    this.initCharts();
  },
  // 3.实例化图表
  methods:{
    initCharts(){
      let dualAxes = new DualAxes(this.$refs['root'],{
        data: [
          [
          { year: '1991', value: 3, count: 10 },
          { year: '1992', value: 4, count: 4 },
          { year: '1993', value: 3.5, count: 5 },
          { year: '1994', value: 5, count: 5 },
          { year: '1995', value: 4.9, count: 4.9 },
          { year: '1996', value: 6, count: 35 },
          { year: '1997', value: 7, count: 7 },
          { year: '1998', value: 9, count: 1 },
          { year: '1999', value: 13, count: 20 },],
          [
          { year: '1991', value: 3, count: 10 },
          { year: '1992', value: 4, count: 4 },
          { year: '1993', value: 3.5, count: 5 },
          { year: '1994', value: 5, count: 5 },
          { year: '1995', value: 4.9, count: 4.9 },
          { year: '1996', value: 6, count: 35 },
          { year: '1997', value: 7, count: 7 },
          { year: '1998', value: 9, count: 1 },
          { year: '1999', value: 13, count: 20 },],
          ],
        xField: 'year',
        yField: ['value', 'count'],
        geometryOptions: [
          {
            geometry: 'line',
            color: '#5B8FF9',
          },
          {
            geometry: 'line',
            color: '#5AD8A6',
          },
        ],
      });
      dualAxes.render();
    }
  }
}
</script>